

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    
<style>




@keyframes spin{
    0%{
        transform: rotateX(0) rotateY(0);
    }
    100%{
        transform: rotateX(360deg) rotateY(360deg);
    }
}
html{
    height:100%;
}
body{
    margin:0px;
    height:100%;
    /*渐变背景色 */
    background: radial-gradient(rgb(255, 240, 192),rgb(236, 79, 6));

    display:flex;
    justify-content: center;
    align-items: center;

    /* 设置3D视角距离 */
    perspective: 1000px;
}
#box{
    width: 300px;
    height: 300px;
    /* border:solid 4px rgb(112, 202, 27); */
    position: relative;
    /*自身发生变形时保留子元素的3D表型效果  */
    transform-style: preserve-3d;
    animation-name: spin;
    animation-duration: 10s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    
}
.pic{
    width: 300px;
    height: 300px;
    position:absolute;
    left: 0;
    top: 0;

    transition:all 1s;
    /* box-sizing:border-box; */
    
}

.spic{
    width: 100px;
    height: 100px;
    position:absolute;
    left: 75px;
    top: 75px;
}
#s-front{
    transform: translateZ(50px);

}

#s-back{
    transform: translateZ(-50px);
}

#s-top{
    transform: translateY(-50px) rotatex(90deg);
}

#s-bottom{
    transform: translateY(50px) rotatex(90deg) ;
}

#s-left{
    transform: translateX(-50px) rotateY(90deg);

}

#s-right{
    transform: translateX(50px) rotateY(90deg);
}









#front{
    transform: translateZ(150px);

}
#box:hover #front{
    transform:translateZ(240px); 
}
#back{
    transform: translateZ(-150px);
}
#box:hover #back{
    transform:translateZ(-240px);
}
#top{
    transform: translateY(-150px) rotatex(90deg);
}
#box:hover #top{
    transform:translateY(-240px) rotatex(360deg);
}
#bottom{
    transform: translateY(150px) rotatex(90deg) ;
}
#box:hover #bottom{
    transform: translateY(240px) rotatex(360deg) ;
}
#left{
    transform: translateX(-150px) rotateY(90deg);

}
#box:hover #left{
    transform: translateX(-240px) rotateY(360deg);
}
#right{
    transform: translateX(150px) rotateY(90deg);
}
#box:hover #right{
    transform: translateX(240px) rotateY(360deg);
}
</style>

</head>

<div id="box">
        <img src="1.jpg" alt="" class="spic" id="s-front">
        <img src="2.jpg" alt="" class="spic" id="s-back">
        <img src="3.jpg" alt="" class="spic" id="s-top">
        <img src="4.jpg" alt="" class="spic" id="s-bottom">
        <img src="5.jpg" alt="" class="spic" id="s-left">
        <img src="6.jpg" alt="" class="spic" id="s-right">





        <img src="1.1.gif" alt="" class="pic" id="front">
        <img src="1.2.gif" alt="" class="pic" id="back">
        <img src="1.3.gif" alt="" class="pic" id="top">
        <img src="1.5.gif" alt="" class="pic" id="bottom">
        <img src="1.5.gif" alt="" class="pic" id="left">
        <img src="1.6.gif" alt="" class="pic" id="right">


    </div>
<body>




</body>
</html>
